.content {
  width: 100%;
  background: url('@/assets/img/bj.png') center no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  color: #fff;
  position: relative;
}
.header_l,.header_m,.header_r{
  height: 100%;
}
// 头部样式
.content .header{
  width: 100%;
  height: 0.75rem;
  padding: 0 0.375rem;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;

  .header_l {
    width: 5.625rem;
  }
  .header_m {
    width: 8.125rem;
    height: 100%; 
  }
  .header_r {
    width: 5.625rem;
  }
} 

.content .main {
  width: 100%;
  padding: 0 0.375rem;
  box-sizing: border-box;
  padding-top: 0.34rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  height: calc(100vh - 0.8rem);
  .item {
    width: 6.25rem;
    .bg{
      height: 0.3rem;
      width: 100%;
      background: url('@/assets/img/main/titleBg.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      .title {
        display: inline-block;
        color: #fff;
        font-weight: bold;
        margin-left: 0.4rem;
        font-size: 0.2rem;
        position: absolute;
        top: -0.08rem;
        letter-spacing: 3px;
      }
      .detail{
        cursor: pointer;
        width: 1rem;
        height: 0.3rem;
        position: absolute;
        top: -0.04rem;
        right: 0rem;
      }
    }
  }
  // 视频背景
  .bgVideo{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: o;
  }
  video{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  // 左
  .main_l {
    width: 6.25rem;
    z-index: 99;
    font-size: 0.23rem;
    .mainl1{
      height: 16%;
      .info {
        height: calc(100% - 0.3rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.15rem 0.2rem 0.1rem 0.6rem;
        box-sizing: border-box;
        .zb-l img {
          width: 1.2rem;
          height: 1.1rem;
        }
        .zb-r {
          height: 100%;
          ul {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            li {
              width: 3rem;
              height: 22%;
              padding-bottom: 0.044rem;
              padding-top: 0.044rem;
              display: flex;
              align-items: center;
              line-height: 2;
              font-size: 0.16rem;
              color: rgb(236,238,240);
              padding-left: 0.12rem;
              background: url('@/assets/img/main/zbxx-zs.png') no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
    .mainl2{
      height: 17%;
    }
    .mainl3 {
      height: 27.5%;
    }
    .mainl4{
      height: 37%;
      flex-wrap: wrap;
      // padding: 0;
      padding-bottom: 2px;
      .title-content{
        height: 8%;
      }
      .videoBox{
        width: 49.6%;
        height: 46.5%;
        .video-title{
          background: url('@/assets/img/main/videoBg.png') no-repeat;
          background-size: 100% 100%;
          width: 100%;
          height: 0.3rem;
          align-items: center;
          justify-content: start;
          font-size: 0.15rem;
          padding-left: 0.4rem;
        }
        .video-content{
          width: 100%;
          height: calc(100% - 0.3rem);
          .redioImg{
            width: 100%;
            height: 100%;
          }
        }
      }
      .vjs-control-bar{
        overflow: hidden !important;
      }
      .video-js{
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
      }
    }
  }
  // 中
  .main_m {
    width: 10.6rem;
    z-index: 99;
    
  }
  // 右
  .main_r {
    z-index: 99;
    padding-bottom: 0.12rem;
    box-sizing: border-box;
    .item {
      .info {
        padding: 0.12rem 0;
        width: 100%;
        height: calc(100% - 0.3rem);
      }
    }
    .mainr1{
      height: 13%;
      padding: 0;
      .info{
        display: flex;
        justify-content: space-around;
        height: calc(100% - 0.3rem);
        letter-spacing: 0.1rem;
        .timer-l {
          width: 45%;
          height: 95%;
          padding-left: 19px;
          background: url('@/assets/img/main/day.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .countup-wrap{
          letter-spacing: 18px;
        }
       
        .timer-r {
          width: 45%;
          height: 95%;
          padding-left: 19px;
          background: url('@/assets/img/main/month.png') no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .mainr2{
      height: 21%;
    }
    .mainr3{
      height: 17%;
      .info {
        display: flex;
        .giveAnAlarm{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          img{
            width: 60%;
            height: 60%;
          }
          .center{
            font-size: 0.15rem;
            color: #fff;
          }
          .bottom{
            color: #e74044;
            span{
              &:nth-child(2){
                font-size: 0.18rem;
                color: #d2aab4;
              }
            }
            .span2{
              color: #fea442 !important;
            }
            .span2-1 {
              color: #d3c0ab !important;
            }
            .span3 {
              color: #5de383 !important;
            }
            .span3-1 {
              color: #aad2ca !important;
            }
          }
        }
      }
    }
    .mainr4{
      height: 34%;
      .info{
        font-size: 0.18rem;
        .tab-head{
          width: 100%;
          height: 10%;
          width: 100%;
          height: 16%;
          align-items: center;
          display: flex;
          background: url('@/assets/img/main/tableHead.png') no-repeat;
          background-size: 100% 100%;
          li{
            width: 20%;
            text-align: center;
          }
        }
        .tableBox{
          width: 100%;
          height: 84%;
          overflow: hidden;
          .swiper-wrapper{
            width: 100%;
            height: 100%;
            flex-direction: column;
            .swiper-slide{
              display: flex;
              width: 100%;
              height: calc(32.7% - 0.05rem) !important;
              margin-top: 0.05rem;
              box-sizing: border-box;
              border: 1px solid #58d8f8;
              justify-content: center;
              align-items: center;
              &:nth-child(3n){
                margin-bottom: 0.05rem;
              }
              
              .item{
                width: 20%;
                text-align: center;
                padding: 0 2px;
                height: 70%;
                display: flex;
                justify-content: center;
                align-items: center;
                border-right: 1px solid #58d8f8;
                &:last-child{
                  border-right: none;
                  height: 86%;
                  padding: 0 2px;
                  img{
                    width: 90%;
                    height: 100%;
                  }
                }
              }
            }
            .slidA{
              background: #58d8f8;
              border: none;
              color: #225d7f;
              .item{
                border-right: 1px solid #225d7f;
              }
            }
          }
        }
      }
    }
    .mainr5{
      height: 14%;
      width: 100%;
      // background-color: pink;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .jumpTo{
        cursor: pointer;
        width: 32%;
        height: 0.67rem;
        background: url('@/assets/img/main/r-bottom.png') no-repeat;
        background-size: 100% 100%;
        font-size: 0.18rem;
        position: relative;
        span{
          position: absolute;
          top: 32%;
          left: 23%;
          display: inline-block;
          max-width: 73%;
          padding-bottom: 0.05rem;
          height: 0.23rem;
          line-height: 0.22rem;
        }
        .active {
          color: #6fcceb;
          border-bottom: 1px solid#41c4f0;
        }
      }
    }
  }
  
}

// 以下样式不必理会
.point {
  position: relative;
}

.point i {
  display: block;
  background-color: #8233b8;
  border-radius: 50%;
  margin: 0 auto;
}

.point span {
  position: absolute;
  top: -0.25rem;
  left: 0;
  display: none;
  font-size: 0.175rem;
  color: yellow;
  text-align: center;
  white-space: nowrap;
}

.point:hover span {
  display: block;
  font-size: 42px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #CECECE;
}

.area span {
  font-size: 0.175rem;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}


// 中间的样式
.content .main .main_m .main_m_t .item1 p:nth-child(1) {
  padding-right: 0.15rem;
}

.content .main .main_m .main_m_t .item1 p:last-child {
  padding: 0;
  margin: 0;
  margin-top: -0.125rem;
  color: #adf3e6;
}

.content .main .main_m .main_m_t .item1:nth-child(2) p {
  color: #00FFEA;
}

.content .main .main_m .main_m_t .item1:nth-child(2) p span {
  color: #00FFEA;
}

.content .main .main_m .main_m_t .item1:nth-child(2) p:last-child {
  color: #adf3e6;
}

.content .main .main_m .main_m_t .item1:nth-child(3) p {
  color: #FEC31D;
}

.content .main .main_m .main_m_t .item1:nth-child(3) p span {
  color: #FEC31D;
}

.content .main .main_m .main_m_t .item1:nth-child(3) p:last-child {
  color: #adf3e6;
}

.content .main .main_m .main_m_t .item1:nth-child(4) p {
  color: #917CFF;
}

.content .main .main_m .main_m_t .item1:nth-child(4) p span {
  color: #917CFF;
}

.content .main .main_m .main_m_t .item1:nth-child(4) p:last-child {
  color: #adf3e6;
}
.el-radio-button__inner{
  background: #1462a2;
}